<template>
    <div class="search_bar_container">
        <div class="search_bar mb10" :class="{ 'is_expand': !isExpand }">
            <el-row :gutter="10">
                <el-col :span="5">
                    <el-cascader v-model="scatidArr" :options="searchData.cat_list" size="mini" clearable
                        @change="changeCasca" style="width: 100%;height: 32px;">
                        <template slot-scope="{ node, data }">
                            <span> {{ data.label }} </span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                </el-col>
                <el-col :span="5">
                    <Select v-model="query.attention" :options="searchData.attion_ls" :placeholder="'关注'"
                        :size="'small'" />
                </el-col>
                <!-- <el-col :span="5">
                    <Select v-model="query.idyun" :options="searchData.onsale_yds" :placeholder="'上架分类'"
                        :size="'small'" />
                </el-col> -->
                <el-col :span="5">
                    <Select v-model="query.storeid" :options="searchData.store_ls" :placeholder="'全部仓库'"
                        :size="'small'" />
                </el-col>
                <el-col :span="5">
                    <Select v-model="query.uid_cp" :options="searchData.ucp_ls" :placeholder="'经办人'" :size="'small'" />
                </el-col>
            </el-row>
        </div>
        <el-row :gutter="10" class="search_bar">
            <el-col :span="5">
                <Select v-model="query.idyun" :options="searchData.yd_ls" :placeholder="'云店'" :size="'small'" />
            </el-col>
            <el-col :span="5">
                <Select v-model="query.tagid" :options="searchData.tag_ls" :placeholder="'标签'" :size="'small'" />
            </el-col>
            <el-col :span="5">
                <el-input v-model="query.kw" placeholder="请输入商品名称搜索" :size="'small'"> </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" size="mini" @click="searchHandle">
                    <i class="el-icon-search"></i>
                    <span class="ml5">搜索</span>
                </el-button>
                <el-button plan size="mini" @click="refreshHandle">
                    <i class="el-icon-refresh"></i>
                    <span class="ml5">重置</span>
                </el-button>
                <span class="ml10 cursor_pointer font_bule" @click="expandHandle">
                    <span class="mr5"> {{ isExpand ? '收起' : '展开' }}</span>
                    <i class="el-icon-arrow-down" :class="{ 'rotate_180': isExpand }"> </i>
                </span>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import Select from '@/components/commV2/Select/index.vue'
// 获取当前组件实例
const { proxy } = getCurrentInstance()
const props = defineProps({
    searchData: {
        type: Object,
        default: () => ({})
    }
})

const query = ref({
    catid: '', // 类别
    storeid: "", // 仓库id
    uid_cp: "", // 经办人
    tagid: "",
    attention: "",
    idyun: "",
    kw: "",
})

const scatidArr = ref([])
const changeCasca = (val) => {
    console.log("级联选择器", val)
    scatidArr.value = val
    query.value.catid = val[val.length - 1]
    console.log("query.value.catid=", query.value.catid)
}

const isExpand = ref(false)
const expandHandle = () => {
    isExpand.value = !isExpand.value
}

const emit = defineEmits(['search', 'refresh'])
const searchHandle = () => {
    emit('search', query.value)
}
const refreshHandle = () => {
    query.value = {
        catid: '', // 类别
        storeid: "", // 仓库id
        uid_cp: "",
        tagid: "",
        attention: "",
        idyun: "",
        kw: "",
    }
    scatidArr.value = []
    emit('refresh', query.value)
}

onMounted(() => { })
defineExpose({})

</script>

<style lang="scss" scoped>
.search_bar_container {
    .search_bar {
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }

    .is_expand {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease-in-out;
    }
}

.rotate_180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

.el-icon-arrow-down {
    transition: transform 0.3s ease-in-out;
}

::v-deep .el-input--mini .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
}

::v-deep .is-active .el-cascader-node__prefix {
    position: absolute;
    right: 10px !important;
}
</style>